<template>
    <view>
        <!-- 搜索框 -->
        <uni-search-bar @confirm="searchConfirm" @input="input" :radius="100" placeholder="请输入搜索内容" cancelButton="none"
            :focus="true">
        </uni-search-bar>
        <!-- 搜索建议列表 -->
        <view class="suggest-list" v-if="suggestList.length!==0">
            <!-- 搜索建议item项 -->
            <view class="suggest-item" v-for="(item,i) in suggestList" :key="i" @click="gotoGoodsDetail(item)">
                <view class="goods-name">{{item.goods_name}}</view>
                <uni-icons type="arrowright" size="16"></uni-icons>
            </view>
        </view>
        <!-- 搜索历史盒子 -->
        <view class="suggest-his-box" v-else>
            <!-- 搜索历史头部 标题 + icon -->
            <view class="his-title">
                <!-- 标题 -->
                <text>搜索历史</text>
                <!-- 图标 -->
                <uni-icons type="trash" size="20" @click="cleanHis"></uni-icons>
            </view>
            <!-- 历史记录列表 -->
            <view class="his-list">
                <!-- 历史记录列表item项 -->
                <uni-tag class="his-item" custom-style=" margin: 5px 5px 0 0;background:#eee;border:none;color:#111"
                    @click="gotoGoodsLsit(item)" :text="item" v-for="(item,i) in histories" :key="i"></uni-tag>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 延时器 用于防抖
                timer: null,
                // 搜索关键字
                searchKw: '',
                // 搜索建议列表
                suggestList: [],
                // 搜索历史
                suggestHis: JSON.parse(uni.getStorageSync('history')) || []
            };
        },
        // 生命周期函数 页面一加载
        onLoad() {
            // 从本地获取历史记录 实际应该从后台获取
            this.suggestHis = JSON.parse(uni.getStorageSync('history') || '[]')
        },
        methods: {
            // 文本框输入事件
            input(e) {
                // e 就是文本框的值
                clearTimeout(this.timer)
                // 间隔一段时间在发起请求 这段时间内再次触发事件 取消上次请求
                this.timer = setTimeout(() => {
                    this.searchKw = e
                    // 发请求
                    this.getSuggestList()
                }, 500)
            },
            // 获取搜索建议
            async getSuggestList() {
                // 搜索关键字为空 不发请求
                if (this.searchKw.trim().length === 0) {
                    this.suggestList = []
                    return
                }
                // 发请求
                const {
                    data: res
                } = await uni.$http.get('/api/public/v1/goods/qsearch', {
                    query: this.searchKw
                })
                // console.log(res);
                if (res.meta.status !== 200) return uni.$showMsg()
                // 保存搜索建议列表到data
                this.suggestList = res.message
                // 保存本次的搜索关键字到历史记录
                this.saveSearchHistory()

            },
            // 去往详情页 并带上商品id
            gotoGoodsDetail(item) {
                uni.navigateTo({
                    url: '/subpck/goods_detail/goods_detail?goods_id=' + item.goods_id
                })
            },
            // 保存搜索历史记录的方法
            saveSearchHistory() {
                // this.suggestHis.push(this.searchKw)
                //1. 用set 对历史记录去重
                const set = new Set(this.suggestHis)
                //2. 本次输入的关键字如果在搜索历史中有 先删除
                set.delete(this.searchKw)
                //3. 再把本次关键词添加进去 保证放在最后面 翻转以后就会在最前面
                set.add(this.searchKw)
                //4. 把去重后的数据转为数组赋值给原数组
                this.suggestHis = Array.from(set)
                // 5.数据持久化保存到本地
                uni.setStorageSync('history', JSON.stringify(this.suggestHis))
            },
            // 清空历史记录
            cleanHis() {
                // 清空data数据和本地存储数据
                this.suggestHis = []
                uni.setStorageSync('history', '[]')
            },
            // 搜索确定事件
            searchConfirm(e) {
                // 去往商品列表页
                // console.log(e);
                if (e.value.trim().length === 0) return uni.$showMsg('请输入搜索内容')
                this.gotoGoodsLsit(e.value)
            },
            // 点击历史记录 去往商品列表页
            gotoGoodsLsit(kw) {
                // 去往商品列表页
                uni.navigateTo({
                    url: '/subpck/goods_list/goods_list?query=' + kw
                })
            }
        },
        computed: {
            histories() {
                // 对历史记录进行翻转 保证最近一次搜索记录在最前面
                // 直接翻转会影响原数组 所以要弄成一个新数组
                return [...this.suggestHis].reverse()
            }
        }
    }
</script>

<style lang="scss">
    .suggest-list {
        padding: 0 5px;

        .suggest-item {
            font-size: 12px;
            padding: 13px 0;
            border-bottom: 1px solid #efefef;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .goods-name {
                // 不允许换行
                white-space: nowrap;
                // 溢出隐藏
                overflow: hidden;
                // 溢出后用省略号显示
                text-overflow: ellipsis;
                margin-right: 3px;
            }
        }
    }

    .suggest-his-box {
        padding: 0 5px;

        .his-title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #efefef;
            font-size: 13px;
        }

        .his-list {
            display: flex;
            flex-wrap: wrap;

            .his-item {
                margin: 5px 5px 0 0 !important;

            }
        }
    }
</style>
